<template>

  <div id="employee-main-container" class="clock-index">
    <wk-page-header
      title="从业人员人数及人员结构"
      :dropdowns="headerMoreHandle"
      @command="headerMoreHandleClick" />

    <div class="wrapper-main" :style="{height: scrollerHeight}" style="overflow: scroll;margin-top: 20px">
<!--    <wk-filter-header>-->
<!--      <template slot="right">-->
<!--        <el-button v-if="hasFilterContent" type="text" @click="resetFilter">清除筛选</el-button>-->
<!--        <wk-popover-filter-->
<!--          ref="popoverFilter"-->
<!--          class="margin-left-interval"-->
<!--          :width="popoverFilterWidth"-->
<!--          :field-from.sync="filterObj"-->
<!--          :field-list="filterList"-->
<!--          :has-content="hasFilterContent"-->
<!--          placement="bottom"-->
<!--          @sure="refreshList"-->
<!--          @reset="resetFilter">-->

<!--        </wk-popover-filter>-->
<!--      </template>-->
<!--    </wk-filter-header>-->
      <table>
        <thead>
        <tr>
          <td class="head" style="text-align: center" rowspan="2">部门</td>

          <td class="head" style="text-align: center" colspan="6">从业人员期末人数</td>
          <td class="head" style="text-align: center" colspan="7">年龄</td>
          <td class="head" style="text-align: center" colspan="7">学历</td>
          <td class="head" style="text-align: center" colspan="6">专业技术职务</td>
          <td class="head" style="text-align: center" colspan="6">技术工人</td>
        </tr>
        <tr>
          <td class="head" style="text-align: center;font-weight: bolder" width="50px">合计</td>
          <td class="head" style="text-align: center">其中：女性</td>
          <td class="head" style="text-align: center">在岗职工</td>
          <td class="head" style="text-align: center">劳务派遣</td>
          <td class="head" style="text-align: center">劳务外包</td>
          <td class="head" style="text-align: center">其他从业人员</td>

          <td class="head" style="text-align: center;font-weight: bolder" >合  计</td>
          <td class="head" style="text-align: center">35岁及以下</td>
          <td class="head" style="text-align: center">36-40</td>
          <td class="head" style="text-align: center">41-45</td>
          <td class="head" style="text-align: center">46-50</td>
          <td class="head" style="text-align: center">51-54</td>
          <td class="head" style="text-align: center">55岁及以上</td>

          <td class="head" style="text-align: center;font-weight: bolder" >合  计</td>
          <td class="head" style="text-align: center">博士研究生</td>
          <td class="head" style="text-align: center">硕士研究生（含硕士或研究生)</td>
          <td class="head" style="text-align: center">大学本科</td>
          <td class="head" style="text-align: center">大学专科</td>
          <td class="head" style="text-align: center">中专</td>
          <td class="head" style="text-align: center">高中及以下</td>

          <td class="head" style="text-align: center;font-weight: bolder" >合  计</td>
          <td class="head" style="text-align: center">高级</td>
          <td class="head" style="text-align: center">正高级</td>
          <td class="head" style="text-align: center">中级</td>
          <td class="head" style="text-align: center">助理级</td>
          <td class="head" style="text-align: center">员级</td>

          <td class="head" style="text-align: center;font-weight: bolder" >合  计</td>
          <td class="head" style="text-align: center">高级技师</td>
          <td class="head" style="text-align: center">技师</td>
          <td class="head" style="text-align: center">高级工</td>
          <td class="head" style="text-align: center">中级工</td>
          <td class="head" style="text-align: center">初级工</td>
        </tr>
        </thead>
        <tbody>
        <tr  v-for="(field, fIndex) in result" :key="fIndex">
          <td>{{field.deptName}}</td>
          <td>{{field.employeeNum+field.dispatchNum+field.outNum+field.laborerNum+field.reEmployerNum+field.otherNum}}</td>
          <td style="text-align: center">{{field.womanNum}}</td>
          <td style="text-align: center">{{field.employeeNum}}</td>
          <td style="text-align: center">{{field.dispatchNum}}</td>
          <td style="text-align: center">{{field.outNum}}</td>
          <td style="text-align: center">{{field.laborerNum+field.reEmployerNum+field.otherNum}}</td>

          <td style="text-align: center">{{field.under35Num+field.between36Num+field.between41Num+field.between46Num+field.between51Num+field.above55Num}}</td>
          <td style="text-align: center">{{field.under35Num}}</td>
          <td style="text-align: center">{{field.between36Num}}</td>
          <td style="text-align: center">{{field.between41Num}}</td>
          <td style="text-align: center">{{field.between46Num}}</td>
          <td style="text-align: center">{{field.between51Num}}</td>
          <td style="text-align: center">{{field.above55Num}}</td>

          <td style="text-align: center">{{field.doctorNum+field.masterNum+field.undergraduateNum+field.juniorCollegeNum+field.secondaryNum+field.highSchoolNum}}</td>
          <td style="text-align: center">{{field.doctorNum}}</td>
          <td style="text-align: center">{{field.masterNum}}</td>
          <td style="text-align: center">{{field.undergraduateNum}}</td>
          <td style="text-align: center">{{field.juniorCollegeNum}}</td>
          <td style="text-align: center">{{field.secondaryNum}}</td>
          <td style="text-align: center">{{field.highSchoolNum}}</td>

          <td style="text-align: center">{{field.highNum+field.subHighNum+field.middleNum+field.assistantNum+field.normalNum}}</td>
          <td style="text-align: center">{{field.highNum}}</td>
          <td style="text-align: center">{{field.subHighNum}}</td>
          <td style="text-align: center">{{field.middleNum}}</td>
          <td style="text-align: center">{{field.assistantNum}}</td>
          <td style="text-align: center">{{field.normalNum}}</td>

          <td style="text-align: center">{{field.seniorTechnicianNum+field.technicianNum+field.seniorEngineerNum+field.intermediateNum+field.juniorNum}}</td>
          <td style="text-align: center">{{field.seniorTechnicianNum}}</td>
          <td style="text-align: center">{{field.technicianNum}}</td>
          <td style="text-align: center">{{field.seniorEngineerNum}}</td>
          <td style="text-align: center">{{field.intermediateNum}}</td>
          <td style="text-align: center">{{field.juniorNum}}</td>
        </tr>
        <tr>
          <td>合计</td>
          <td v-for="(totalNum) in totalData">{{totalNum}}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {
    hrmEmployeeStructureExportAPI,
    hrmEmployeePersonalStructureAPI
  } from '@/api/hrm/worker'

  import WkPageHeader from '@/components/Page/WkPageHeader'

  import { mapGetters } from 'vuex'

  import { downloadExcelWithResData } from '@/utils'

  export default {

    components: {
      WkPageHeader,
    },
    data() {
      return {
        // 筛选宽
        popoverFilterWidth: 150,
        // 高级筛选
        filterObj: {}, // 筛选确定数据
        showDview: false,
        list: [], // 列表
        result: [],
        totalData:[]
      }
    },
    computed: {
      ...mapGetters([
        'collapse',
        'hrm'
      ]),
      scrollerHeight: function() {
        return (window.innerHeight - 150) + 'px'; //自定义高度需求
      },

      // 考勤所有权限
      attendanceAuth() {
        return this.hrm && this.hrm.attendance
      },

      // 导出请假记录权限
      exportLeaveRecordAuth() {
        return this.attendanceAuth && this.attendanceAuth.exportLeaveRecord
      },

      /**
       * 头部更多操作
       */
      headerMoreHandle() {
        const temps = []
        if (this.exportLeaveRecordAuth) {
          temps.push({ command: 'export', name: '导出', icon: 'wk wk-export' })
        }
        return temps
      }
    },
    watch: {
      collapse: {
        handler(val) {
          this.popoverFilterWidth = document.documentElement.clientWidth - (val ? 89 : 225)
        },
        immediate: true
      }
    },
    created() {
      window.onresize = () => {
        this.tableHeight = document.documentElement.clientHeight - 190
      }
    },
    mounted(){
      this.initData();
    },
    methods: {
      /**
      * 合计查询数据
      */
       initData(){

        hrmEmployeePersonalStructureAPI(this.params).then(res => {
          this.result=res.data;

          for (let i = 0; i <= 31; i++) {
            this.totalData.push(0);
          }
          for (var i = 0; i <res.data.length; i++) {
            var field = res.data[i];
            if (field!=null) {
              this.totalData[0] += field.employeeNum + field.dispatchNum + field.outNum + field.laborerNum + field.reEmployerNum + field.otherNum;
              this.totalData[1] += field.womanNum;
              this.totalData[2] += field.employeeNum;
              this.totalData[3] += field.dispatchNum;
              this.totalData[4] += field.outNum;
              this.totalData[5] += field.laborerNum + field.reEmployerNum + field.otherNum

              this.totalData[6] += field.under35Num + field.between36Num + field.between41Num + field.between46Num + field.between51Num + field.above55Num;
              this.totalData[7] += field.under35Num;
              this.totalData[8] += field.between36Num;
              this.totalData[9] += field.between41Num;
              this.totalData[10] += field.between46Num;
              this.totalData[11] += field.between51Num;
              this.totalData[12] += field.above55Num;

              this.totalData[13] += field.doctorNum + field.masterNum + field.undergraduateNum + field.juniorCollegeNum + field.secondaryNum + field.highSchoolNum;
              this.totalData[14] += field.doctorNum;
              this.totalData[15] += field.masterNum;
              this.totalData[16] += field.undergraduateNum;
              this.totalData[17] += field.juniorCollegeNum;
              this.totalData[18] += field.secondaryNum;
              this.totalData[19] += field.highSchoolNum;

              this.totalData[20] += field.highNum + field.subHighNum + field.middleNum + field.assistantNum + field.normalNum;
              this.totalData[21] += field.highNum;
              this.totalData[22] += field.subHighNum;
              this.totalData[23] += field.middleNum;
              this.totalData[24] += field.assistantNum;
              this.totalData[25] += field.normalNum;

              this.totalData[26] += field.seniorTechnicianNum + field.technicianNum + field.seniorEngineerNum + field.intermediateNum + field.juniorNum;
              this.totalData[27] += field.seniorTechnicianNum;
              this.totalData[28] += field.technicianNum;
              this.totalData[29] += field.seniorEngineerNum;
              this.totalData[30] += field.intermediateNum;
              this.totalData[31] += field.juniorNum;
            }
          }
        })
       },

      /**
       * 头部更多操作
       */
      headerMoreHandleClick(command) {

        if (command == 'export') {
          this.loading = true

          hrmEmployeeStructureExportAPI(this.params).then(res => {
            downloadExcelWithResData(res)
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  .clock-index {
    .wk-filter-header {
      margin-top: 30px;
      margin-bottom: 20px;
      line-height: 32px;
    }

    .d-view {
      position: fixed;
      top: 60px;
      right: 0;
      bottom: 0;
      width: 75%;
      min-width: 926px;
    }

    .el-date-editor.el-input {
      width: 130px;
    }

    .wrapper-main{
      //表格行交替色实现
      table{
        border-spacing: 0;
        width: 100%;
        thead{
          tr{
            &:nth-child(2n+1){
              background-color: #FAFAFA;
            }
          }
        }
        //表格行通用设置
        tr{
          height: 40px;
          font-size: 14px;
          color: #666666;
          line-height: 14px;
          font-weight: 400;
          &:nth-child(2n){
            background-color: #fafafa;
          }
        }
        //表头样式设置
        .head{
          font-size: 14px;
          color: #666666;
          line-height: 14px;
          font-weight: 600;
        }
        td{border:1px solid darkgray;text-align: center}
      }
    }
  }
</style>
